iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0
自我挑戰組

自學vue~點亮Roadmap過程系列 第 19

vue3鍊成術第十九天-Class 與 Style 綁定(2)

  • 分享至 

  • xImage
  •  

Class 與 Style 綁定(2)

綁定內聯樣式

綁定對象
:style 支持綁定 JavaScript 對象值,對應的是 HTML 元素的 style 屬性:

const activeColor = ref('red')
const fontSize = ref(30)
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

儘管推薦使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 屬性 key (對應其 CSS 中的實際名稱),例如:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接綁定一個樣式對象通常是一個好主意,這樣可以使模板更加簡潔:

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})
<div :style="styleObject"></div>

同樣的,如果樣式對象需要更復雜的邏輯,也可以使用返回樣式對象的計算屬性。

綁定數組
我們還可以給 :style 綁定一個包含多個樣式對象的數組。這些對象會被合併後渲染到同一元素上:

<div :style="[baseStyles, overridingStyles]"></div>

自動前綴
當你在 :style 中使用了需要瀏覽器特殊前綴的 CSS 屬性時,Vue 會自動為他們加上相應的前綴。Vue 是在運行時檢查該屬性是否支持在當前瀏覽器中使用。如果瀏覽器不支持某個屬性,那麼將嘗試加上各個瀏覽器特殊前綴,以找到哪一個是被支持的。

樣式多值
你可以對一個樣式屬性提供多個 (不同前綴的) 值,舉例來說:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

數組僅會渲染瀏覽器支持的最後一個值。在這個示例中,在支持不需要特別前綴的瀏覽器中都會渲染為 display: flex。


上一篇
vue3鍊成術第十八天-Class 與 Style 綁定(1)
下一篇
vue3鍊成術第二十天-列表渲染(1)
系列文
自學vue~點亮Roadmap過程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言